<template>
	<view class="container">
		<Navigator2 :title="$t('device.connectNetwork')"></Navigator2>

		<!-- 蓝牙搜索图片 -->
		<view class="device-image">
			<template v-if="connecting || setupNetworkStatus == 1">
				<image v-if="networkType == 'WIFI'" src="/static/WIFI.gif" mode="aspectFit"></image>
				<image v-if="networkType == '4G'" src="/static/4G.gif" mode="aspectFit"></image>
			</template>
			<template v-else>
				<image v-if="setupNetworkStatus == 2" src="/static/setupnetworksuccess.png" mode="aspectFit"></image>
				<image v-if="setupNetworkStatus == 3" src="/static/setupnetworkfail.png" mode="aspectFit"></image>
			</template>
		</view>

		<template v-if="networkType != ''">
			<!-- 搜索状态 -->
			<view class="search-status">
				<text v-if="setupNetworkStatus == 1">{{ $t('device.networkConnecting') }}</text>
				<text v-if="setupNetworkStatus == 2">{{ $t('device.networkConnectedSuccess') }}</text>
				<text v-if="setupNetworkStatus == 3">{{ $t('device.networkConnectedFail') }}</text>
			</view>
			
			<!-- 连接网络区域 -->
			<view class="network-type">
				<text v-if="setupNetworkStatus != 3">{{ $t('device.networkType') }}：{{ networkType }}</text>
				<text v-if="setupNetworkStatus == 3 && setupNetworkResult != ''">{{ setupNetworkResult }}</text>
			</view>

			<view class="container log-list" style="font-size: 10px;">
				<block v-for="(log, index) of logs" :key="index">
					<text class="log-item">{{ log }}</text><br />
				</block>
			</view>
			
			<!-- 底部固定区域 -->
			<view v-if="!connecting" class="bottom-section">
				<!-- 下一步按钮 -->
				<view class="confirm-button" @click="confirm">
					<text>{{ $t('device.confirm') }}</text>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	import Navigator2 from '@/components/Navigator2.vue'
	import api from '../../js/api'
	export default {
		data() {
			return {
				deviceId: '',
				deviceType: '',
				networkType: '',
				currentWifi: '',
				wifiName: '',
				wifiPwd: '',
				pushId: 0,
				setupNetworkStatus: 1,
				setupNetworkResult: '',
				connecting: true,
				logs: [],
				queryCount: 0,
				maxQueryCount: 10
			}
		},
		onLoad(param) {
			this.deviceId = param.deviceId
			this.deviceType = param.deviceType
			this.networkType = param.networkType
			if (param.currentWifi && param.currentWifi != 'undefined') {
				this.currentWifi = param.currentWifi
			}
			this.wifiName = param.wifiName
			this.wifiPwd = param.wifiPwd

			this.connect()
		},
		methods: {
			connect() {
				let msg = {}

				if (this.networkType == 'WIFI') {
					msg = {
						action: 'setupNetworkWifi',
						data: {
							wifiName: this.wifiName,
							wifiPwd: this.wifiPwd
						}
					}
				} else { // 4G
					msg = {
						action: 'setupNetwork4G'
					}
				}

				api.pushMsgToDevice(this.deviceId, JSON.stringify(msg)).then(res => {
					console.log('pushMsgToDevice', res)
					this.pushId = res.id
					//定时查询
					this.checkSetupNetworkStatus()
				})
			},
			confirm() {
				uni.navigateTo({
					url: `/pages/device/networksetting?deviceId=${this.deviceId}&deviceType=${this.deviceType}&currentWifi=${this.setupNetworkStatus == 2 ? this.wifiName : this.currentWifi}`
				})
			},
			checkSetupNetworkStatus() {
				if (this.pushId == 0) {
					return
				}
				
				// 查询次数加1
				this.queryCount++
				
				// 记录日志
				this.logs.push(`第${this.queryCount}次查询状态`)
				
				// 如果超过最大查询次数，则视为超时
				if (this.queryCount > this.maxQueryCount) {
					this.setupNetworkStatus = 3
					this.setupNetworkResult = this.$t('device.networkConnectedTimeout')
					this.connecting = false
					return
				}
				
				api.checkPushMsgStatus(this.pushId).then(res => {
					console.log('checkPushMsgStatus', res)
					
					if (res.status == 2) {
						this.setupNetworkStatus = 2
						this.setupNetworkResult = this.$t('device.networkConnectedSuccess')
						this.connecting = false
					} else if (res.status == 3) {
						this.setupNetworkStatus = 3
						this.setupNetworkResult = this.$t('device.networkConnectedFail')
						this.connecting = false
					} else {
						//1秒后继续查询
						setTimeout(() => {
							this.checkSetupNetworkStatus()
						}, 1000)
					}
				}).catch(err => {
					console.error('查询状态出错', err)
					this.logs.push('查询状态出错: ' + JSON.stringify(err))
					
					//1秒后继续查询，除非已达到最大查询次数
					if (this.queryCount < this.maxQueryCount) {
						setTimeout(() => {
							this.checkSetupNetworkStatus()
						}, 1000)
					} else {
						this.setupNetworkStatus = 3
						this.setupNetworkResult = this.$t('device.networkConnectedQueryFail')
						this.connecting = false
					}
				})
			}
		},
		components: {
			Navigator2
		}
	}
</script>

<style lang="scss" scoped>
.container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.device-image {
	display: flex;
	justify-content: center;
	margin-top: 80px;
	
	image {
		width: 200px;
		height: 200px;
	}
}

.search-status {
	display: flex;
	justify-content: center;
	padding: 40rpx 60rpx 20rpx;
	
	text {
		font-size: 32rpx;
		line-height: 24px;
		color: #1F2937;
	}
}

.network-type {
	display: flex;
	justify-content: center;
	padding: 0 60rpx 200rpx;
	
	text {
		font-size: 28rpx;
		color: #707A89;
	}
}

.bottom-section {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: white;
	padding: 40rpx 60rpx;
}


.confirm-button {
	height: 100rpx;
	background: #0256FF;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	
	&:active {
		background: #0245ff;
	}
	
	text {
		color: white;
		font-size: 32rpx;
	}
}
</style>
